<template>
	<view class="container">
		<form>
			<view class="form-item">
				<view class="label">收货人</view>
				<view class="right">
					<input class="input" type="text" v-model="formdata.name" placeholder="名字" />
				</view>
			</view>
			<view class="form-item">
				<view class="label">手机号码</view>
				<view class="right">
					<input class="input" type="text" v-model="formdata.telephone" placeholder="手机号" />
					<text>+86 <uni-icons type="forward"></uni-icons></text>
				</view>
			</view>
			<view class="form-item">
				<view class="label">所在地区</view>
				<view class="right">
					<input class="input" type="text"
					 @click="openSimpleAddress"
					 v-model="formdata.area" placeholder="省/市/区" />
					<uni-icons color="orange" type="location-filled"></uni-icons>
					<simple-address ref="simpleAddress" @onConfirm="simpleAddressOnConfirm"></simple-address>
				</view>
			</view>
			<view class="form-item">
				<view class="label">详细地址</view>
				<view class="right">
					<textarea class="input" style="width: 90%; height: 100rpx;" type="text" v-model="formdata.address"
						placeholder="小区楼栋号/村庄名称" />
					<uni-icons color="orange" type="mic"></uni-icons>
					
				</view>
				
			</view>
			<view class="form-item">
				<view class="label">建议配送时段</view>
				<view class="right" style="width: 300rpx;">
					<picker mode="selector" :range="times" range-key="time" @change="timesChange" style="width: 100%;">
						<input class="input" type="text" 
						v-model="formdata.time" placeholder="请选择配送时段" />
					</picker>

				</view>
			</view>
			<view class="form-item">
				<view class="label">备注</view>
				<view class="right">
					<textarea class="input" style="width: 90%; height: 100rpx;" type="text" v-model="formdata.memo"
						placeholder="备注信息" />
				</view>
			</view>
			<view class="form-item">
				<view class="label" style="width: 300rpx;">设置为默认地址</view>
				<view style="text-align: right; width: 500rpx;  ">
					<switch :checked="formdata.isDefaultAddress" @change="defaultAddressChange" />
				</view>
			</view>
			<view class="form-item">
				<button type="primary" style="width: 90%; border-radius: 20rpx;" @click="showData">保存</button>
			</view>
		</form>
		
	</view>
</template>

<script>
	import simpleAddress from '@/components/simple-address/simple-address.vue';
	export default {
		data() {
			return {
				times: [{
					/*配送时间选项*/
					id: 1,
					time: '上午配送，时间：8:00~12:00'
				}, {
					id: 2,
					time: '下午配送，时间：12:00~18:00'
				}],
				timeIndex: 1,
				/*配送时间选中的数据项*/
				formdata: {
					/*表单数据*/
					name: '',
					/*收货人名*/
					telephone: '',
					/*电话 */
					time: '',
					/*配送时间*/
					area: '',
					/*省市区*/
					address: '',
					/*详细地址*/
					memo: '',
					/*备注*/
					isDefaultAddress: true,
					/*是否设置为默认地址*/
				},
				pickerValueDefault: [0, 0, 0] /*SimpleAddress默认选择项*/

			}
		},
		components:{
			simpleAddress
		},
		methods: {
			showData(){
				console.log("======");
				uni.showToast({
					title: JSON.stringify(this.formdata)+"",
					icon: 'none'
				});
			},
			simpleAddressOnConfirm(e){
				console.log(e);
				this.formdata.area = e.label
			},
			openSimpleAddress(){
				this.$refs.simpleAddress.open()
			},
			timesChange(e) {
				this.timeIndex = e.detail.value // 选中的时间序号 0 表示第times的第0项
				this.formdata.time = this.times[this.timeIndex].time
			}
		}
	}
</script>

<style>
	.container {
		padding: 20px;
		font-size: 14px;
		line-height: 24px;
	}

	.form-item {
		margin: 20rpx;
		display: flex;
		flex-direction: row;

	}

	.label {
		width: 150rpx;
		padding: 10rpx;
		flex-shrink: 0
	}

	.right {
		border: solid 1rpx #999;
		border-radius: 10rpx;
		flex: 1;
		padding: 10rpx;
		display: flex;
		flex-direction: row;
		flex-shrink: 0;
	}

	.input {
		flex: 1;
		flex-shrink: 1
	}
</style>
